<template>
  <div class="films">
    <div class="tips-text">
      按'{{ selectedOption }}'查询'{{ searchText }}'的结果为：
    </div>
    <el-row :gutter="20" style="padding-top: 40px;" v-if="filmList.length>0">
      <el-col style="padding-bottom: 40px;text-align: center;" v-for="(item, index) in filmList" :key="index"
              :span="4">
        <router-link :to=" '/film/info?fid=' + item.id">
          <el-card shadow="hover" style="padding: 0">
            <el-tag
                class="poster-tag"
                :type="item.vip ? 'warning' : 'success'"
                size="small">
              {{ item.vip ? 'VIP' : '免费' }}
            </el-tag>
            <img style="width: 160px; height: 220px;padding-bottom: 10px" :src="item.cover"
                 alt="">
            <div class="movie-overlay movie-overlay-bg">
              <div class="movie-info">
                <span class="movie-title">{{ item.name }}</span>
              </div>
            </div>
          </el-card>
        </router-link>
      </el-col>
    </el-row>
    <div v-else class="no-movies">
      暂无影片
    </div>
  </div>
</template>

<script>
import {PageSearchFilm} from "@/api/film";

export default {

  data() {
    return {
      filmList: {},
      searchText: '',
      selectedOption: ''
    }
  },

  mounted() {
    const searchText = this.$route.query.text;
    const selectedOption = this.$route.query.option;
    PageSearchFilm(searchText, selectedOption).then(res => {
      this.filmList = res.data
      this.searchText = searchText;
      this.selectedOption = selectedOption
    })
  },

  methods: {},

}
</script>

<style scoped>


.films {
  width: auto;
  padding: 20px 220px;
}

.el-card {
  border: none;
  width: 160px;
  height: 220px;
  position: relative;
}

>>> .el-card__body {
  padding: 0 0 10px;
  height: 220px;
}

.movie-overlay {
  width: 160px;
  height: 220px;
  position: absolute;
  top: 0;
  left: 0;

}

.poster-tag {
  position: absolute;
  left: -2px;
  top: -2px;
  z-index: 5;
}

.movie-overlay-bg {
  background: linear-gradient(180deg, rgba(31, 28, 48, 0) 0%, rgba(31, 28, 48, 0.3) 70%, #1F1C30 100%);
}

.movie-overlay .movie-info {
  color: #fff;
  position: absolute;
  margin: auto;
  bottom: 7px;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";

}

.movie-overlay .movie-title {
  margin-left: 7px;
  width: 100%;
  transition: all 0.4s ease-in-out;
}

.el-card:hover .movie-title {
  transition: all 0.4s ease-in-out;
  font-size: 20px;
}

.tips-text {
  margin-top: 15px;
  font-size: 30px;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
  color: grey;
}

.no-movies {
  text-align: center;
  color: rgba(255, 255, 255, 0.18);
  font-size: 60px;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
  font-weight: bolder;

  height: 200px;
  line-height: 200px;
}

</style>